import './index.less'

import React, { useState, useEffect, useRef } from 'react';
import { DatePicker, Space, Select, Checkbox, Input, InputNumber, Divider, Pagination } from 'antd';
import dayjs from 'dayjs';
import type { Dayjs } from 'dayjs';
import type { TimeRangePickerProps } from 'antd';
import type { InputRef } from 'antd';

import { Link } from 'umi';
import { findProofList, findProof, proof, redProof, clickId, delProof } from '@/services/proof/proof'


import Table1 from './proofModule/table1 copy';
import ProjectName from './proofModule/projectName';
import { From } from '../financial';

 function ProofList() {
    const [proof, setProof] = useState<findProof>({})

    useEffect(() => {
        render();
    }, [])
    const render = async () => {
        const { data, code } = await findProofList({
            ...proof,
            pageNo: 1,
            pageSize: 10
        })
        console.log(data);

        if (code == 0) {
            setProofData(data)
        }
        const redIdProof=await redProof({
            id:2
         })
         const delIdProof=await delProof({
            id:3
         })
    }
    
    
 
    //日期选择器
    const { RangePicker } = DatePicker;

    const DateonChange = (date: Dayjs) => {
        if (date) {
            console.log('Date: ', date);
        } else {
            console.log('Clear');
        }
    };
    const onRangeChange = (dates: null | (Dayjs | null)[], dateStrings: string[]) => {
        if (dates) {
            proof.certificateDateStart = dateStrings[0],
                proof.certificateDateEnd = dateStrings[1],
                setProof(proof)
            console.log(proof)
        } else {
            console.log('Clear');
        }
    }; const rangePresets: TimeRangePickerProps['presets'] = [
        { label: 'Last 7 Days', value: [dayjs().add(-7, 'd'), dayjs()] },
        { label: 'Last 14 Days', value: [dayjs().add(-14, 'd'), dayjs()] },
        { label: 'Last 30 Days', value: [dayjs().add(-30, 'd'), dayjs()] },
        { label: 'Last 90 Days', value: [dayjs().add(-90, 'd'), dayjs()] },
    ];

    //select选择
    const handleChange1 = (value: number) => {
        proof.subId = value
        setProof(proof)
        console.log(proof)

    };
    const handleChange2 = (value: string) => {
        proof.makeCertificatePerson = value
        setProof(proof)
        console.log(proof)
    };
    //input,凭证号
    const startNum = (value: number | null) => {
        proof.certificateNumberStart = value
        setProof(proof)
        console.log(proof)
    }
    const endNum = (value: number | null) => {
        proof.certificateNumberEnd = value
        setProof(proof)
        console.log(proof)
    }

    //分页
    const [pageSize, setPageSize] = useState(10);

    const [current, setCurrent] = useState(2);
    const onchange = (current: number, pageSize: number) => {
        setPageSize(pageSize)
        setCurrent(current)
        proof.pageSize=pageSize;
        proof.pageNo=current;
        setProof(proof)
        console.log(pageSize);
        console.log(current);
        console.log(proof)

    }
    //keyWord
    const inputRef = useRef<InputRef>(null);

    const sharedProps = {
        style: { width: '100%' },
        ref: inputRef,
    };
    const findProof = () => {
        findProofList(proof).then(res => {
            console.log(res);
            console.log(proof);
            
        })
    }
    const tHead = [];
    tHead.push('摘要信息', '科目名称', '借方金额', '贷方金额', '操作')

    //数据tableData--proofData
    const [proofData, setProofData] = useState<[proof]>([{}]);
    proofData.push(
        { id: 0, check: 0, red: 1, finish: 0, date: '2021-3-21', fontNum: '记-1', moreFile: 0, state: 0, keyWord: ['购入固定资产', '什么什么'], proName: ['1601 固定资产', '2022 应付账款'], getMoney: [2000.00, 150.00], sendMoney: [5000.00, 300.00] },
        { id: 1, check: 1, red: 0, finish: 1, date: '2021-3-21', fontNum: '记-1', moreFile: 0, state: 0, keyWord: ['购入固定资产', '什么什么'], proName: ['1601 固定资产', '2022 应付账款'], getMoney: [2000.00, 150.00], sendMoney: [5000.00, 300.00] },
        { id: 2, check: 1, red: 0, finish: 1, date: '2021-3-21', fontNum: '记-1', moreFile: 0, state: 0, keyWord: ['购入固定资产', '什么什么'], proName: ['1601 固定资产', '2022 应付账款'], getMoney: [2000.00, 150.00], sendMoney: [5000.00, 300.00] },
        { id: 3, check: 0, red: 1, finish: 0, date: '2021-3-21', fontNum: '记-1', moreFile: 0, state: 0, keyWord: ['购入固定资产', '什么什么'], proName: ['1601 固定资产', '2022 应付账款'], getMoney: [2000.00, 150.00], sendMoney: [5000.00, 300.00] },
        { id: 4, check: 0, red: 1, finish: 0, date: '2021-3-21', fontNum: '记-1', moreFile: 0, state: 0, keyWord: ['购入固定资产', '什么什么'], proName: ['1601 固定资产', '2022 应付账款'], getMoney: [2000.00, 150.00], sendMoney: [5000.00, 300.00] },
        { id: 5, check: 0, red: 1, finish: 0, date: '2021-3-21', fontNum: '记-1', moreFile: 0, state: 0, keyWord: ['购入固定资产', '什么什么'], proName: ['1601 固定资产', '2022 应付账款'], getMoney: [2000.00, 150.00], sendMoney: [5000.00, 300.00] },
        { id: 6, check: 0, red: 1, finish: 0, date: '2021-3-21', fontNum: '记-1', moreFile: 0, state: 0, keyWord: ['购入固定资产', '什么什么'], proName: ['1601 固定资产', '2022 应付账款'], getMoney: [2000.00, 150.00], sendMoney: [5000.00, 300.00] },
        { id: 7, check: 0, red: 1, finish: 0, date: '2021-3-21', fontNum: '记-1', moreFile: 0, state: 0, keyWord: ['购入固定资产', '什么什么'], proName: ['1601 固定资产', '2022 应付账款'], getMoney: [2000.00, 150.00], sendMoney: [5000.00, 300.00] },
        { id: 8, check: 0, red: 1, finish: 0, date: '2021-3-21', fontNum: '记-1', moreFile: 0, state: 0, keyWord: ['购入固定资产', '什么什么'], proName: ['1601 固定资产', '2022 应付账款'], getMoney: [2000.00, 150.00], sendMoney: [5000.00, 300.00] },
        { id: 9, check: 0, red: 1, finish: 0, date: '2021-3-21', fontNum: '记-1', moreFile: 0, state: 0, keyWord: ['购入固定资产', '什么什么'], proName: ['1601 固定资产', '2022 应付账款'], getMoney: [2000.00, 150.00], sendMoney: [5000.00, 300.00] },
        { id: 10, check: 0, red: 1, finish: 0, date: '2021-3-21', fontNum: '记-1', moreFile: 0, state: 0, keyWord: ['购入固定资产', '什么什么'], proName: ['1601 固定资产', '2022 应付账款'], getMoney: [2000.00, 150.00], sendMoney: [5000.00, 300.00] },
        { id: 11, check: 0, red: 1, finish: 0, date: '2021-3-21', fontNum: '记-1', moreFile: 0, state: 0, keyWord: ['购入固定资产', '什么什么'], proName: ['1601 固定资产', '2022 应付账款'], getMoney: [2000.00, 150.00], sendMoney: [5000.00, 300.00] },
        { id: 12, check: 0, red: 1, finish: 0, date: '2021-3-21', fontNum: '记-1', moreFile: 0, state: 0, keyWord: ['购入固定资产', '什么什么'], proName: ['1601 固定资产', '2022 应付账款'], getMoney: [2000.00, 150.00], sendMoney: [5000.00, 300.00] },
        { id: 13, check: 0, red: 1, finish: 0, date: '2021-3-21', fontNum: '记-1', moreFile: 0, state: 0, keyWord: ['购入固定资产', '什么什么'], proName: ['1601 固定资产', '2022 应付账款'], getMoney: [2000.00, 150.00], sendMoney: [5000.00, 300.00] }
    )
    return (
        <>
            <div className="page">
                {/*  */}
                <div className='header'>
                    <span>凭证列表</span>
                    <div className='bom'></div>
                </div>
                {/* 搜索条件 */}
                <div className='factor'>
                    {/* 搜索条件--左 */}
                    <div className='factorLeft'>
                        <Space direction="vertical" size={12}>
                            <RangePicker presets={rangePresets} onChange={onRangeChange} />
                        </Space>
                        <Space wrap>
                            <Select

                                style={{ width: 120, marginBottom: '500px', marginLeft: '20px' }}
                                onChange={handleChange1}
                                options={[
                                    { value: 1, label: '1001库存现金' },
                                    { value: 2, label: '1002银行存款' },
                                    { value: 3, label: '1012其他货币资金' },
                                    { value: 4, label: '1101短期投资' },
                                    { value: 5, label: '--1101001股票' },
                                    { value: 6, label: '--1101002债券' },
                                    { value: 7, label: '--1101003基金' },
                                    { value: 8, label: '1121应收票据' },
                                    { value: 9, label: '1122应收账款' },
                                ]}
                            />
                        </Space>
                        <Space wrap>
                            <Select
                                defaultValue="制单人"
                                style={{ width: 120, marginLeft: '20px', lineHeight: '30px' }}
                                onChange={handleChange2}
                                options={[
                                    { value: 'Phoebe', label: 'Phoebe' },
                                    { value: 'lucy', label: 'Lucy' },
                                    { value: 'Yiminghe', label: 'yiminghe' },
                                    { value: 'disabled', label: 'Disabled', disabled: true },
                                ]}
                            />
                        </Space>
                        <div className='num'>
                            <span>凭证号：</span>
                            <InputNumber className='startNum' onChange={startNum}></InputNumber><span>至：</span><InputNumber className='endNum' onChange={endNum}></InputNumber>
                        </div>

                        <Input className='keyWord' {...sharedProps} placeholder='备注/摘要' onChange={(e) => {
                            proof.journalSummary = e.target.value
                            setProof(proof)
                            console.log(proof);

                        }} />
                        {/* <Input className='keyWord' placeholder='备注/摘要' showCount maxLength={20} onChange={keyWord}></Input> */}
                        <div className='btn btnFind' onClick={findProof}><h4>搜索</h4></div>
                    </div>
                    {/* 搜索条件--右 */}
                    <div className='factorRight'>
                        <Link to="checkProof"><div className='btn btnCheck'><h4>审核</h4></div></Link>
                        <Link to="offCProof"><div className='btn btnOffC'><h4>反审核</h4></div></Link>
                        <Link to=""><div className='btn btnPrint'><h4>打印</h4></div></Link>
                        <div className='btn btnOut'><h4>导出</h4></div>
                        <Link to="newProof"><div className='btn btnAdd'><h4>新增</h4></div></Link>
                    </div>
                </div>

                {/* 表格 */}
                <Table1 />\
                {/* proofData={proofData} */}
                <Pagination
                    onChange={onchange}
                    onShowSizeChange={(current, size) => {
                        setPageSize(size)
                        setCurrent(current)
                        console.log(current);
                        console.log(size);
                    }}
                    total={proofData.length}
                    showTotal={(total) => `当前合计,共 ${proofData.length} 条记录`}
                    pageSize={pageSize}
                />

            </div >
            <ProjectName />
        </>
    )
}
export default ProofList